//SPDX-FileCopyrightText: Copyright 2022-2024 深圳市同心圆网络有限公司
//SPDX-License-Identifier: GPL-3.0-only

import React, { useEffect, useState } from "react";
import { observer } from 'mobx-react';
import { Button, Form, Input, message, Modal, Table } from "antd";
import type { AssetCateInfo } from "@/api/org_asset";
import { list_asset_cate, add_asset_cate, update_asset_cate, remove_asset_cate } from "@/api/org_asset";
import { useStores } from "@/hooks";
import { request } from "@/utils/request";
import type { ColumnsType } from 'antd/lib/table';
import { EditText } from "@/components/EditCell/EditText";

export interface AssetCateModalProps {
    onClose: () => void;
}

const AssetCateModal = (props: AssetCateModalProps) => {
    const userStore = useStores("userStore");
    const orgStore = useStores("orgStore");

    const [cateInfoList, setCateInfoList] = useState<AssetCateInfo[]>([]);
    const [newCateName, setNewCateName] = useState("");

    const loadCateInfoList = async () => {
        if (orgStore.curOrgId == "") {
            return;
        }
        const res = await request(list_asset_cate({
            session_id: userStore.sessionId,
            org_id: orgStore.curOrgId,
        }));

        setCateInfoList(res.cate_list);
    };

    const addCate = async () => {
        if (newCateName == "" || orgStore.curOrgId == "") {
            return;
        }
        await request(add_asset_cate({
            session_id: userStore.sessionId,
            org_id: orgStore.curOrgId,
            cate_name: newCateName,
        }));
        message.info("增加成功");
        setNewCateName("");
        await loadCateInfoList();
    };

    const removeCate = async (cateId: string) => {
        await request(remove_asset_cate({
            session_id: userStore.sessionId,
            org_id: orgStore.curOrgId,
            asset_cate_id: cateId,
        }));
        message.info("删除成功");
        await loadCateInfoList();
    };

    const columns: ColumnsType<AssetCateInfo> = [
        {
            title: "名称",
            render: (_, row: AssetCateInfo) => (
                <EditText editable content={row.cate_name} showEditIcon
                    onChange={async content => {
                        if (content.trim() == "") {
                            return false;
                        }
                        try {
                            await request(update_asset_cate({
                                session_id: userStore.sessionId,
                                org_id: orgStore.curOrgId,
                                asset_cate_id: row.asset_cate_id,
                                cate_name: content.trim(),
                            }));
                            await loadCateInfoList();
                            return true;
                        } catch (e) {
                            console.log(e);
                            return false;
                        }
                    }} />

            ),
        },
        {
            title: "资产数量",
            width: 100,
            dataIndex: "asset_count",
        },
        {
            title: "操作",
            width: 100,
            render: (_, row: AssetCateInfo) => (
                <Button type="link" danger style={{ minWidth: 0, padding: "0px 0px" }} disabled={row.asset_count > 0}
                    onClick={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        removeCate(row.asset_cate_id);
                    }}>删除</Button>
            ),
        }
    ];

    useEffect(() => {
        loadCateInfoList();
    }, []);

    return (
        <Modal open title="管理资产类别" footer={null} mask={false}
            onCancel={e => {
                e.stopPropagation();
                e.preventDefault();
                props.onClose();
            }}>
            <Table rowKey="asset_cate_id" dataSource={cateInfoList} columns={columns} pagination={false} bordered={false}
                scroll={{ y: "calc(100vh - 300px)" }} />
            <Form layout="inline" style={{ marginTop: "10px" }}>
                <Form.Item>
                    <Input style={{ width: "380px" }} value={newCateName} onChange={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        setNewCateName(e.target.value.trim());
                    }} />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" disabled={newCateName == ""} onClick={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        addCate();
                    }}>增加类别</Button>
                </Form.Item>
            </Form>
        </Modal>
    );
}


export default observer(AssetCateModal);